<template>
    <div class="WsyjDiseaseTrend" id="WsyjDiseaseTrendLineBar"></div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import {chartServer} from '@/api/installServer.ts';
    import GVChartDataConvert from '@/util/GVChartDataConvert';
    import publishObjectPath from '@/util/configRegistry';

    const districtCode = publishObjectPath.value.districtCode;

    @Component({
        name: 'WsyjDiseaseTrend',
        components: {}
    })
    export default class WsyjDiseaseTrend extends Vue {
        private gvChart?: any;
        private data?: object;

        public mounted() {
            gv.config.ChartTemplate.load();
            const url = '/epidemic/situation/weekillnum';
            const that = this;
            chartServer
                .getConfig( url,{districtCode: districtCode})
                .then((result: any) => {
                    if (
                        result.data &&
                        result.status === 200 &&
                        result.data.code === 0 &&
                        result.data.data
                    ) {
                        that.data = result.data.data;
                        const source = new gv.source.SimpleSource(
                            GVChartDataConvert.convert(that.data)
                        );
                        const dom = document.getElementById('WsyjDiseaseTrendLineBar');
                        this.gvChart = new gv.chart.AreaLineChart(source, dom);
                        this.setStyle();
                        this.gvChart.render();
                    }
                });
            // const source = new gv.source.SimpleSource(this.getData());
            // const dom = document.getElementById('WsyjDiseaseTrendLineBar');
            // this.gvChart = new gv.chart.AreaLineChart(source, dom);
            // this.setStyle();
            // this.gvChart.render();
        }

        private getData() {
            this.data = {
                items: [
                    {
                        entrys: [
                            {name: 'x', alias: '日期', value: '1月11日'},
                            {name: 'a', alias: '确认病例', value: 15},
                            {name: 'b', alias: '疑似病例', value: 0}
                        ]
                    },
                    {
                        entrys: [
                            {name: 'x', alias: '日期', value: '1月12日'},
                            {name: 'a', alias: '确认病例', value: 22},
                            {name: 'b', alias: '疑似病例', value: 3}
                        ]
                    },
                    {
                        entrys: [
                            {name: 'x', alias: '日期', value: '1月13日'},
                            {name: 'a', alias: '确认病例', value: 33},
                            {name: 'b', alias: '疑似病例', value: 6}
                        ]
                    },
                    {
                        entrys: [
                            {name: 'x', alias: '日期', value: '1月14日'},
                            {name: 'a', alias: '确认病例', value: 50},
                            {name: 'b', alias: '疑似病例', value: 12}
                        ]
                    },
                    {
                        entrys: [
                            {name: 'x', alias: '日期', value: '1月15日'},
                            {name: 'a', alias: '确认病例', value: 80},
                            {name: 'b', alias: '疑似病例', value: 22}
                        ]
                    },
                    {
                        entrys: [
                            {name: 'x', alias: '日期', value: '1月16日'},
                            {name: 'a', alias: '确认病例', value: 105},
                            {name: 'b', alias: '疑似病例', value: 44}
                        ]
                    },
                    {
                        entrys: [
                            {name: 'x', alias: '日期', value: '1月17日'},
                            {name: 'a', alias: '确认病例', value: 150},
                            {name: 'b', alias: '疑似病例', value: 72}
                        ]
                    }
                ]
            };
            return GVChartDataConvert.convert(this.data);
        }

        private setStyle() {
            const mins = this.getMin(this.data);
            this.gvChart.config('grid', {
                top: 25,
                left: 54,
                right: 30
            });
            this.gvChart.config('series[0].name', '确诊病例');
            this.gvChart.config('series[1].name', '疑似病例');
            this.gvChart.config('series[0].itemStyle', {
                // color: '#f49530'
                color: '#ce3636'
            });
            this.gvChart.config('series[0].areaStyle', {
                opacity: 0.3
            });

            this.gvChart.config('yAxis', {
                offset: 8,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(114,114,114,0.8)'
                    }
                },
                axisTick: {
                    show: false
                },
                min: mins
            });
            this.gvChart.config('xAxis', {
                axisLabel: {
                    rotate: 40,
                    color: '#ffffff',
                    fontSize: 10
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#2A343E'
                    }
                },
                nameTextStyle: {
                    color: '#ccc'
                }
            });
            this.gvChart.config('legend', {
                textStyle: {
                    color: '#ffffff'
                },
                top: 'bottom'
            });
            this.gvChart.config('tooltip', {
                formatter : function (d: any) {
                    let tempValue;
                    if(d.componentIndex ==1){
                        tempValue=d.data.b;
                    }else {
                        tempValue=d.data.a;
                    }
                    return  `${d.seriesName}<br>
<div style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:5px;background:${d.color}"></div>${d.name}：${tempValue}例`

                }
            });

            this.gvChart.config('series[0].symbol', 'circle');
            this.gvChart.config('series[0].symbolSize', 24);
            this.gvChart.config('series[0].symbolOffset', [0, '-50%']);
            this.gvChart.config('series[0].label', {
                show: true,
                position: 'inside',
                fontSize: 12,
                color: '#fff'
            });
            this.gvChart.config('series[1].label', {
                show: true,
                position: 'inside',
                fontSize: 12,
                color: '#fff'
            });
            this.gvChart.config('xAxis.axisLabel.interval', 0);
            this.gvChart.config('series[1].itemStyle', {
                // color: '#e9392b'
                color: '#ee8240'
            });

            this.gvChart.config('series[1].areaStyle', {
                opacity: 0.3
            });
        }

        private getMin(datas: any) {
            const arrs: any = [];
            datas.items.map((item: any) => {
                arrs.push(item.entrys[1].value);
                arrs.push(item.entrys[2].value);
            });
            return Math.min.apply(null, arrs);
        }
    }
</script>

<style scoped>
    .WsyjDiseaseTrend {
        width: 100%;
        height: 100%;
    }
</style>
